import React, { useRef } from 'react'

import { useNavigate } from 'react-router-dom'

export default function Header() {
  const navigate = useNavigate()
  const goRef = useRef()

  const forward=()=>{
    navigate(1)
  }
  const back=()=>{
    navigate(-1)
  }
  const go=()=>{
    return ()=>{
      navigate(goRef.current.value*1)
    }
  }
  return (
    <div>
      <button onClick={forward}>前进</button>
      <button onClick={back}>后退</button>
      <input ref={goRef} type="number" placeholder="前进或后退多少步" />
      <button onClick={go()}>Go</button>
    </div>
  )
}
